<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>按钮</button>
    <script>
        // 节流:一个事件之内频繁触发,以第一次为准

        // 1.普通方法
        // let btn = document.querySelector('button')
        // btn.addEventListener('click',function(){
        //     console.log('模拟发送ajax');
        // });

        // 2.模拟lodash里面的方法
        let btn = document.querySelector('button');
        // 自己封装一个j1方法,实现某个函数的节流处理
        btn.addEventListener('click',j1(function(){
            console.log('模拟发送ajax...');
        },1000))

        // 封装一个方法实现节流
        function j1(fn,time){
            // 上一次的事件,定义到行数外层
            let prevTime = 0;
            // j1必须返回一个函数
            return function(){
                // 思路:两次触发的时间间隔如果大于time,就能执行
                // 获取当前时间
                let nowTime = Date.now(); // 获取距离1970年1月1日的毫秒值,用来相减
                if(nowTime - prevTime > time){
                    fn()
                    // 调用成功后,上次一时间要修改
                    prevTime = nowTime;
                }
            } 
        }
    </script>
</body>
</html>